<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>过滤与排序</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <template v-for = "book in sortedBooks">
                    <li>书名：{{book.name}}</li>
                    <li>作者：{{book.author}}</li>
                </template>
            </ul>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    books:[
                        {
                            name: '《Vue.js实战》',
                            author: '梁英'
                        },
                        {
                            name: '《JavaScript语言精粹》',
                            author: 'Douglas Crockford'
                        },
                        {
                            name: '《JavaScript高级程序设计》',
                            author: 'Nicholas C.Zakas'
                        }
                    ]
                },
                // computed:{
                //     filterbooks:function(){
                //         return this.books.filter(function (book){
                //             return book.name.match(/JavaScript/);
                //         });//match：使匹配 使相称
                //     }
                // }

                computed:{
                    sortedBooks:function(){
                        return this.books.sort(function(a,b){
                            return a.name.length<b.name.length;
                        })
                    }
                }
            })
        </script>
    </body>
</html>